<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <title>运动会管理系统</title>
	    <link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body>
		<form class="layui-form" action="">
		
		            <div class="layui-form-item">
		                <div class="layui-inline">
		                    <label class="layui-form-label">学号</label>
		                    <div class="layui-input-inline">
		                        <input type="text" name="ano" lay-verify="required"
		                               placeholder="请输入学号" autocomplete="off" class="layui-input">
		                    </div>
		                </div>
		                <div class="layui-inline">
		                    <label class="layui-form-label">项目</label>
		                    <div class="layui-input-inline">
		                        <input type="text" name="cnA" placeholder="请输入项目" autocomplete="off" class="layui-input">
		                    </div>
		                </div>
		            </div>
		            <div class="layui-form-item">
		                <div class="layui-input-block">
		                    <button class="layui-btn" lay-submit lay-filter="searchAth">搜索</button>
		                </div>
		            </div>
		        </form>
		
		        <button id = "addAthlete" type="button" class="layui-btn layui-btn-fluid">新增</button>
		
		        <table class="layui-hide" id="test" lay-filter="test"></table>
		
		        <script type="text/html" id="barDemo">
		            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		        </script>
		    </div>
		
		    
		</div>
		
		
		<script src="../layui/layui.js"></script>
		
		<script>
		        layui.use(['table','layer','form'], function(){
		          var table = layui.table;
				  var layer = layui.layer;
				  var form = layui.form;
				  var searchTable = layui.layer;
				  var $ = layui.$;
		            table.render({
		            elem: '#test'
					,id: 'athlete'
		            ,url:'http://localhost:8080/calist'
		            ,cellMinWidth: 80
		            ,cols: [[
		            {field:'ano', title: '运动员编号', sort: true,align: 'center'}
		            ,{field:'an',  title: '姓名',align: 'center'}
		            ,{field:'cnoA', title: '项目编号',sort: true,align: 'center'}
		            ,{field:'cnA', title: '项目名称',align: 'center'}
		            ,{field:'score',  title: '成绩',align: 'center'}
		            ,{field:'rank',  title: '名次',align: 'center'}
		            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		        ]]
		        ,page: true
				,limits: [8,10,12]
		        });
				//监听编辑删除按钮
				  table.on('tool(test)', function(obj){
				  var data = obj.data;
				  if(obj.event === 'detail'){
				    layer.msg('ID：'+ data.id + ' 的查看操作');
				  } else if(obj.event === 'del'){
				    layer.confirm('真的删除行么', function(index){
						$.post("http://localhost:8080/deleteAthlete",data,function(d){
							if(d!=true){
								layer.msg(d);
							}else{
								obj.del();
								layer.close(index);							
							}
						});
						
				    });
				  } else if(obj.event === 'edit'){
					layer.open({
						type: 2,
						title: "录入成绩",
						content: "../window/editScoreA.html",
						area: ['500px','400px'],
						end: function(){
							table.reload("athlete");						
						},
						success: function(layero, index){
							//把数据从表格层传送到弹出层，需要拿到弹出层的DOM，和索引
							//数据回显
							var body = layer.getChildFrame('body', index);
							body.find("#an").val(data.an);
							body.find("#ano").val(data.ano);			
							body.find("#cnoA").val(data.cnoA);
							body.find("#rank").val(data.rank);
							body.find("#score").val(data.score);
				
						}
					});
				  }
				});
				//监听新增按钮
				$("#addAthlete").click(function(){
					//点击按钮之后，弹出一个添加页面的弹出层
					layer.open({
						type: 2,
						title: "新增运动员",
						content: "../window/addAthlete.html",
						area: ['500px','500px'],
						end: function(){
							table.reload("athlete");						
						}
					});
				});
				
				//监听搜索按钮
				form.on('submit(searchAth)', function(data){
					console.log("->",data);
					table.reload('athlete', {
						 url: 'http://localhost:8080/searchAthlete'
						    ,methods:"post"						        
					        , where: data.field
					        , page: {
					          curr: 1
							  ,limit: 20
					        }
					      });
					return false;
				});
				
		    });						    										
		</script>
	</body>
</html>
